有了圖表，也要在下面附上文字資料，並且為了之後可能會加上的其他數據，要利用Bootstrap做出點擊開合的功能。

JS更新網頁

JS取得的資料會與圖表的資料相同，所以可以寫在同一個ajax中，但在寫JS之前，必須在Html裡面宣告圖表的位置。

index.html

<p>
    <h2 class="mb-0">
        <button class="btn btn-secondary btn-lg btn-block" type="button" data-toggle="collapse"
            data-target="#basic_table"
            aria-expanded="false" aria-controls="basic_table">
            基本數據(逐月)
        </button>
    </h2>
</p>
<div class="collapse" id="basic_table">
    <table id="stat_table" class="table">
        <thead>

        </thead>
        <tbody></tbody>
    </table>
</div>

上面的Button控制下面的table

而我要更新的位置就是#stat_table這個，接著開始寫JS。

我的table會有head和body兩個，head會放數據的種類(PA、AB等等)，body會放實際的數值，所以我必須分開取得兩個元件。

let stat_table_head = $("#stat_table > thead");
let stat_table_body = $("#stat_table > tbody");

取得元件後，首先要做的是清空他原本的內容，如果沒有先清空，表格會無限的增加。

stat_table_head.empty();
stat_table_body.empty();

先處理head

let tr = $("<tr/>").append($("<th/>",{scope: "col",text: "#"}));
for(let i = 0; i < result['attr'].length; i++){
    let th = $("<th/>",{
        scope: "col",
        text: result['attr'][i]
    });
    tr.append(th);
}
stat_table_head.append(tr);

接著增加body的數值。

data_type = ['PA', 'AB', 'RBI', 'H', 'HR', 'AVG', 'OBP', 'SLG'];
for (let k =0; k < data_type.length; k++) {
    let body_tr = $("<tr/>").append($("<th/>",{scope:"col", text: data_type[k]}));
    for(let data in result[data_type[k]]){
        let body_th = $("<th/>", {
            scope: "col",
            text: result[data_type[k]][data]
        });
        body_tr.append(body_th);
    }
    stat_table_body.append(body_tr);
}

月份的數據和圖表都包成一個funcion了，接著利用onchange屬性觸發就好。

<div class="form-group col-6">
    <select name="player" id="player" onchange="get_month(); get_recent(); get_habit();" class="form-control">
    </select>
</div>

下一篇將增加別的數據

完整的function內容

function get_month(){
    let p = $("#player").val();
    let chart = echarts.init(document.getElementById('month_stat'), 'white', { renderer: 'canvas' });
    let chart2 = echarts.init(document.getElementById('month_stat_2'), 'white', { renderer: 'canvas' });
    let stat_table_head = $("#stat_table > thead");
    let stat_table_body = $("#stat_table > tbody");

    if(p!=='選擇球員'){
        $.ajax({
        type: 'POST',
        url: "/getchartinfo",
        data: {"p":p},
        success: function (result) {
            stat_table_head.empty();
            stat_table_body.empty();
            let option = {
                title: {
                    text: result['name']
                },
                legend: {
                    data: ['AVG', 'SLG', 'OBP']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                dataZoom: [ 
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ],
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    data: result['attr']
                },
                yAxis: {},
                series: [{
                    name: 'AVG',
                    type: 'bar',
                    data: result['AVG']
                },{
                    name: 'OBP',
                    type: 'bar',
                    data: result['OBP']
                },{
                    name: 'SLG',
                    type: 'bar',
                    data: result['SLG']
                }]
            };
            chart.setOption(option);

            let option_2 = {
                title: {
                    text: '其他數據'
                },
                tooltip: {},
                legend: {
                    data: ['PA', 'AB', 'RBI', 'H', 'HR']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ],
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    data: result['attr']
                },
                yAxis: {},
                series: [{
                    name: 'PA',
                    type: 'bar',
                    data: result['PA']
                }, {
                    name: 'AB',
                    type: 'bar',
                    data: result['AB']
                }, {
                    name: 'H',
                    type: 'bar',
                    data: result['H']
                }, {
                    name: 'RBI',
                    type: 'bar',
                    data: result['RBI']
                }, {
                    name: 'HR',
                    type: 'bar',
                    data: result['HR']
                }]
            };
            chart2.setOption(option_2);
            
            let tr = $("<tr/>").append($("<th/>",{scope: "col",text: "#"}));
            for(let i = 0; i < result['attr'].length; i++){
                let th = $("<th/>",{
                    scope: "col",
                    text: result['attr'][i]
                });
                tr.append(th);
            }
            stat_table_head.append(tr);

            data_type = ['PA', 'AB', 'RBI', 'H', 'HR', 'AVG', 'OBP', 'SLG'];
            for (let k =0; k < data_type.length; k++) {
                let body_tr = $("<tr/>").append($("<th/>",{scope:"col", text: data_type[k]}));
                for(let data in result[data_type[k]]){
                    let body_th = $("<th/>", {
                        scope: "col",
                        text: result[data_type[k]][data]
                    });
                    body_tr.append(body_th);
                }
                stat_table_body.append(body_tr);
            }
        }
    });
    }
}